<template>
  <div>
    <el-dialog
      :visible.sync="blage"
      :modal="false"
      :modal-append-to-body="false"
      :append-to-body="true">
      <div class="div1">
        <span>上传头像</span>
      </div>
      <!--      action="http://www.hrkj.fit:8090/lep2/WeChat/user/uploadimage"-->
      <el-upload
        class="hover1"
        name="alterimage"
        :headers="myHeader()"
        action="http://192.168.2.122:8080/user/uploadimage"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        list-type="picture-card">
        <img v-if="imageUrl" :src="imageUrl" class="avatar" width="100%" height="100%">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </el-dialog>
  </div>
</template>

<script>
// 引入操作的Token的函数
import {setAvatar} from '@/utils/auth'
import {mapGetters} from "vuex";

export default {
  name: "reName",
  data() {
    return {
      //是否展示上传图片
      blage: false,
      imageUrl: '',
      userimage: ''
    };
  },
  methods: {
    // 上传头像需要token
    myHeader() {
      console.log(this.token);

      return {
        'authorization': 'Bearer ' + this.token
      }
    },

    open() {
      this.blage = true;
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.userimage = res;
      setAvatar(res);
      //修改vuex里面的头像的数据
      this.$store.dispatch("user/reimages", {'avatar': res})
      //修改Vuex里面的数据
      this.blage = false;
    },
  },
  computed: {
    ...mapGetters(['token', 'avatar'])
  }
}
</script>

<style scoped>
.div1 {
  text-align: center;
  padding-bottom: 10px;
  color: #3a8ee6
}

.hover1 {
  margin-left: 130px;
}

.div2 {
  margin-top: 20px;
  text-align: center
}

</style>
